<div class="row list-row">
    <!---托管行列表Begin-->
    <div class="col-sm-3">
        <div class="box box-success">
            <div class="box-header with-border">
                <h3 class="box-title">托管行</h3>
            </div>
            <div class="box box-body table-responsive">
                <form class="form-inline">
                    <div class="form-group">
                        <input type="text" class="form-control ibt-search-input" placeholder="请输入托管行名称"  title="为空搜索全部" (keyup.enter)="getBankListData(searchBank)" [(ngModel)]="searchBank" name="searchBank">
                        <button type="button" class="btn btn-primary" (click)="getBankListData(searchBank)">查询</button>
                    </div>
                </form>
                <div style="max-height: 485px;overflow: auto;">
                    <table class="table table-bordered table-hover table-striped">
                        <thead>
                            <tr>
                                <th>托管行</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <a href="javascript:void(0)" (click)="getBankListData('',true)">
                                        全部
                                    </a>
                                </td>
                            </tr>
                            <tr *ngFor="let item of searchBankData; let i = index">
                                <td>
                                    <a href="javascript:void(0)" (click)="getBankListData(item.bankName,true,item)">
                                        {{item.bankName}}
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!---托管行列表End-->
    <!---参数配置End-->
    <div class="col-sm-9">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">划款指令参数配置</h3>
                <button type="button" class="btn btn-primary pull-right" (click)="openModal('add')">新增</button>
            </div>
            <div class="box box-body table-responsive">
                <form class="form-inline">
                    <h4 class="box-title">
                        当前托管行：
                        <span class="text-green"><strong>{{nowBank.BankName==="" ? "全部" : nowBank.BankName}}</strong></span>
                    </h4>
                </form>
                <!--基金配置搜索栏区域Begin-->
                <form class="form-inline">
                    <div>
                        <div class="form-group">
                            <label for="bankName">托管行名称：</label>
                            <input type="text" class="form-control ibt-search-input" id="bankName" name="bankName" [(ngModel)]="searchBody.bankName">
                        </div>
                        <div class="form-group">
                            <label for="vcFundCode">基金代码：</label>
                            <input type="text" class="form-control ibt-search-input" id="vcFundCode" name="vcFundCode" [(ngModel)]="searchBody.vcFundCode">
                        </div>
                        <div class="form-group">
                            <label for="vcFundName">基金名称：</label>
                            <input type="text" class="form-control ibt-search-input" id="vcFundName" name="vcFundName" [(ngModel)]="searchBody.vcFundName">
                        </div>
                        <div class="form-group">
                            <label for="vcBusinessType">业务类型：</label>
                            <select class="form-control ibt-search-input" name="vcBusinessType" [(ngModel)]="searchBody.vcBusinessType">
                                <option value="">全部</option>
                                <option value="1">银行间业务</option>
                                <option value="2">新股网下申购</option>
                                <option value="3">定存</option>
                                <option value="4">债券分销</option>
                                <option value="5">期货出入金</option>
                                <option value="6">QDII换汇</option>
                                <option value="7">席位佣金支付</option>
                                <option value="8">审计费</option>
                            </select>
                        </div>
                        <div class="form-group search-btn-container max">
                            <button type="button" class="btn btn-primary" (click)="search()">查询</button>
                            <button type="button" class="btn btn-warning" (click)="resetSearch()">重置</button>
                        </div>
                    </div>
                </form>
                <!--基金配置搜索栏区域End-->
                <!--基金详细配置列表Begin-->
                <div class="table-scroll-content">
                    <table class="table table-bordered table-hover table-striped table-keep-line">
                        <thead>
                            <tr>
                                <th>基金代码</th>
                                <th>基金名称</th>
                                <th>托管行名称</th>
                                <th>业务类型</th>
                                <th>发送方式</th>
                                <th>传真</th>
                                <th>是否发送成交单</th>
                                <th>备注</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let item of bankData;let i = index;" [attr.data-index]="i">
                                <td>
                                    <!-- 基金代码 -->
                                    {{item.vcFundCode}}
                                </td>
                                <td>
                                    <!-- 基金名称 -->
                                    {{item.vcFundName}}
                                </td>
                                <td>
                                    <!-- 托管行名称 -->
                                    {{item.bankName}}
                                </td>
                                <td>
                                    <!-- 业务类型 -->
                                    {{vcBusinessType[item.vcBusinessType]}}
                                </td>
                                <td>
                                    <!-- 发送方式 -->
                                    {{paymentMethod[item.paymentMethod]}}
                                </td>
                                <td>
                                    <!-- 传真 -->
                                    {{item.vcFaxId}}
                                </td>
                                <td>
                                    <!-- 是否发送成交单 -->
                                    {{item.toSendTradeOrder === "1" ? "是":"否" }}
                                </td>
                                <td class="long-text">
                                    <!-- 备注 -->
                                    {{item.note}}
                                </td>
                                <td>
                                    <div class="cell">
                                        <button type="button" class="btn btn-primary" (click)="openModal('update',item)">修改</button>
                                        <button type="button" class="btn btn-warning" (click)="deleteFundConfig(item)">删除</button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!--基金详细配置列表End-->

                <!--基金详细配置列表分页Begin-->
                <div class="box-footer clearfix">
                    <app-pagination [currentPageNum]="pageInfo.currentPageNum" [pagesShow]="pageInfo.pagesShow" [totalPages]="pageInfo.totalPages"
                        (pageChanged)="pageNavigation($event)">
                        <div class="pull-left pagination-detail" data-pagination-additional="true">
                            <span class="pagination-info">当前显示第{{pageInfo.startRow}}到第{{pageInfo.endRow}}条&nbsp;&nbsp;&nbsp;&nbsp;总共{{pageInfo.total}}条</span>
                            <span class="page-list"><span class="btn-group dropup">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="page-size">{{pageInfo.pageSize}}</span>
                            <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li *ngFor="let i of pageInfo.pageList" role="menuitem" [class.active]="pageInfo.pageSize === i" (click)="pageSizeChange(i)">
                                    <a href="javascript:void(0)">{{i}}</a>
                                </li>
                            </ul>
                            </span> 条记录每一页</span>
                        </div>
                    </app-pagination>
                </div>
                <!--基金详细配置列表分页End-->
            </div>
        </div>
    </div>
    <!---参数配置End-->
</div>
<!-- 修改/新增模态框开始 -->
<div class="modal fade" id="commonModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 *ngIf="type == 'add'" class="modal-title">添加基金配置</h4>
                <h4 *ngIf="type == 'update'" class="modal-title">修改基金配置</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline">
                    <div class="row ext-from-item">
                        <label for="modalBankName" class="col-sm-2">托管行：</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="modalBankName" id="modalBankName" [disabled]="type == 'add' && nowBank.BankName !== '' " [(ngModel)]="commonModalData.vcBankId">
                                <option *ngFor="let item of modalSelectBankData" value="{{item.vcBankId}}">{{item.bankName}}</option>
                            </select>
                        </div>
                        <label for="modalBusinessType" class="col-sm-2">业务类型：</label>
                        <div class="col-sm-4">
                            <select class="form-control" [disabled]="type == 'update'" name="modalBusinessType" [(ngModel)]="commonModalData.vcBusinessType">
                                <option value="">请选择</option>
                                <option value="1">银行间业务</option>
                                <option value="2">新股网下申购</option>
                                <option value="3">定存</option>
                                <option value="4">债券分销</option>
                                <option value="5">期货出入金</option>
                                <option value="6">QDII换汇</option>
                                <option value="7">席位佣金支付</option>
                                <option value="8">审计费</option>
                            </select>
                        </div>
                    </div>
                    <div class="row ext-from-item">
                        <label for="modalFundCode" class="col-sm-2">基金代码：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" [disabled]="type == 'update'" name="modalFundCode" id="modalFundCode" [(ngModel)]="commonModalData.vcFundCode" (click)="openChooseFundModal(commonModalData)">
                        </div>
                        <label for="modalFundName" class="col-sm-2">基金名称：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" [disabled]="type == 'update'" name="modalFundName" id="modalFundName" readonly [(ngModel)]="commonModalData.vcFundName">
                        </div>
                    </div>
                    <div class="row ext-from-item">
                        <label for="modalPaymentMethod" class="col-sm-2">发送方式：</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="modalPaymentMethod" id="modalPaymentMethod" [(ngModel)]="commonModalData.paymentMethod">
                                <option value="">请选择</option>
                                <option value="1">深证通</option>
                                <option value="2">网银</option>
                                <option value="3">传真</option>
                                <option value="4">电子</option>
                            </select>
                        </div>
                        <label for="modalSend" class="col-sm-2" style="padding-left: 0px;">是否发送成交单：</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="modalSend" id="modalSend" [(ngModel)]="commonModalData.toSendTradeOrder">
                                <option value="">请选择</option>
                                <option value="1">是</option>
                                <option value="0">否</option>
                            </select>
                        </div>
                    </div>
                    <div class="row ext-from-item">
                        <label for="modalvcFaxId" class="col-sm-2">传真：</label>
                        <div class="col-sm-4">
                        <input type="text" class="form-control" name="modalvcFaxId" id="modalvcFaxId" [(ngModel)]="commonModalData.vcFaxId">
                        </div>
                    </div>
                    <div class="row">
                        <label for="note" class="col-sm-2">备注：</label>
                        <div class="col-sm-10">
                            <textarea class="form-control"  name="note" id="note" cols="30" rows="10" [(ngModel)]="commonModalData.note"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button *ngIf="type=='add'" type="button" class="btn btn-primary col-sm-2 col-sm-offset-4" data-dismiss="modal" (click)="addOrUpateFundConfig()">新增</button>
                <button *ngIf="type=='update'" type="button" class="btn btn-primary col-sm-2 col-sm-offset-4" data-dismiss="modal" (click)="addOrUpateFundConfig()">修改</button>
                <button type="button" class="btn btn-default col-sm-2" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 修改/新增模态框结束 -->

<!-- 基金选择模态框开始 -->
<div class="modal fade" id="chooseFundModal" tabindex="-1" role="dialog" aria-labelledby="新增">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">基金列表</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline">
                    <div class="ext-from-item row">
                        <label class="col-sm-2" for="firstInput">基金代码：</label>
                        <div class="col-sm-3">
                                <input type="text" class="form-control" name="firstInput" id="firstInput" placeholder="基金代码"  [(ngModel)]="modalFundSearch.vcFundCode">
                        </div>
                        <label class="col-sm-2" for="secondInput">基金名称：</label>
                        <div class="col-sm-3">
                        <input type="text" class="form-control" name="secondInput" id="secondInput" placeholder="基金名称" [(ngModel)]="modalFundSearch.vcFundName">
                        </div>
                        <button class="btn btn-primary" (click)="searchFundList()">搜索</button>
                    </div>
                </form>
                <!-- 列表-->
                <div class="table-scroll-content">
                    <table class="table table-bordered table-keep-line table-hover table-striped pull-right align-center">
                        <tr>
                            <th>选择</th>
                            <th>基金代码</th>
                            <th>基金名称</th>
                        </tr>
                        <tr *ngFor="let item of modalFundData">
                            <td>
                                <!-- 选中 -->
                                <input type="radio" name="modalRadio" (click)="checked(item,$event)">
                            </td>
                            <td>
                                <!-- 基金代码 -->
                                {{item.vcFundCode}}
                            </td>
                            <td>
                                <!-- 基金名称 -->
                                {{item.vcFundName}}
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- 列表 END-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary col-sm-2 col-sm-offset-4" (click)="confirmFund()">确定</button>
                <button type="button" class="btn btn-default col-sm-2" (click)="closeFundModal()">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 基金选择模态框结束 -->